<template>
    <div class="notify">
        <group v-for="notify in notifies" :key="notify.id">
            <card @click.native="toDetail(notify.id)">
                <div slot="content" class="card-padding" v-bind:class="{read: notify.is_read}">
                        <p>{{notify.title}}</p>
                        <p>{{notify.data | tran}}</p>
                    </div>
                </card>
                </group>
        <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
            <span slot="no-results">
                <divider>我是有底线的</divider>
            </span>
            <span slot="no-more">
                <divider>不要在扯了</divider>
            </span>
        </infinite-loading>

    </div>
</template>
<script>
    import {Group, Card, dateFormat,Divider, Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'
import InfiniteLoading from 'vue-infinite-loading'

export default {
    components: {
        Card,
            Group,
            InfiniteLoading,
            Divider,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton
    },
    data() {
        return {
            notifies: [],
            page: {next_page: 0}
        }
    },
    filters: {
        tran(val) {
            if (val) {
                return val.slice(0, 44)
            } 
            return val
        }
    },
    created() {
        this.$store.commit("storeNotify", false)  
        this.$store.commit("storeState", false)  
    },
    methods: {
        onInfinite() {

            this.$http.get("notifies.json", {params: {page: this.page.next_page}}).then(res => {
                let data = res.data
                if (data.notifies.length) {
                    this.notifies = this.notifies.concat(data.notifies);
                    this.page = data.page
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
                    if (this.notifies.length / 50 === 10 || data.page.next_page == null) {
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                    } 
                } else {
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                }
            })
        },
            toDetail(id){
                this.$router.push({name: "notify", params: {id: id}})
            },
            
    }
}
</script>
<style>
    .card-padding {
        padding: 10px;
        color: #000;
        cursor: pointer;
    }
    .read {
        color: #ccc;
    }
</style>
